<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated class="bg-teal-3">
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />
        <q-toolbar-title>
          <q-btn flat to="/">主页</q-btn>
        </q-toolbar-title>
        <router-link to="/manage">
          <q-btn color="teal-10" label="后台" />
        </router-link>
        <div style="margin-left: 1rem">v{{version}}</div>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered content-class="bg-grey-1">
      <q-list>
        <q-item-label header class="text-grey-8">导航菜单</q-item-label>
        <EssentialLink class="text-grey-8" color="grey" v-for="link in essentialLinks" :key="link.title" v-bind="link" />
      </q-list>
    </q-drawer>
    <q-page-container class="row" style="background: #e9ecef">
      <q-page class="col">
        <div style=" display:flex;flex-direction:column;height:100%">
          <div class="page-content">
            <router-view />
          </div>
          <div class="page-footer">
            <lxl-icp-record></lxl-icp-record>
          </div>
        </div>
      </q-page>
      <q-page class="col-md-3 col-lg-2 col-sm-0 col-xs-0">
        <lxl-recommend-list></lxl-recommend-list>
      </q-page>
    </q-page-container>
  </q-layout>
</template>
<style scoped>
  a {text-decoration: none}

  .page-content {
    flex:1 1 auto;
  }
  .page-footer {
    flex: 0 0 auto;
  }
</style>
<script>
import EssentialLink from 'components/EssentialLink'
import { mapState } from 'vuex'

export default {
  name: 'BlogsMainLayout',

  components: {
    EssentialLink
  },

  data () {
    return {
      leftDrawerOpen: false,
      version: '1.0.0'
    }
  },
  computed: {
    ...mapState({
      essentialLinks: state => {
        return state.menus.menuList.blogsMenuList.map(el => {
          return {
            title: el.name,
            link: el.url,
            caption: el.name,
            icon: el.img
          }
        })
      }
    })
  }
}
</script>
